<template>
  <view class="merchant-center">
    <!-- 状态栏占位 -->
    <view class="status-bar-placeholder">
      
    </view>
    
    <!-- 头部 -->
    <view class="header">
      <text class="header-title">商家中心</text>
    </view>
    
    <scroll-view 
      scroll-y 
      class="content-container"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 身份卡片 -->
      <view class="identity-card">
        <view class="card-content">
          <image class="merchant-avatar" :src="isLogin ? info.logo : '/static/images/icon_portrait'"></image>
          
          <view class="merchant-info">
            <view class="name-container">
              <text class="merchant-name">{{ isLogin ? info.name : '点击登录' }}</text>
              <view class="verified-badge" v-if="info.verified">已认证</view>
            </view>
            <view class="merchant-id">ID: {{ info.id || '--' }}</view>
          </view>
          
          <view class="action-button settings" @click="menuJump(menuList[3])">
            <u-icon name="setting" color="#fff" size="32rpx"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 经营状态卡片 -->
      <view class="status-card">
        <view class="status-label">
          <view class="status-indicator" :class="{'active': info.is_run}"></view>
          <text>{{ info.is_run ? '营业中' : '休息中' }}</text>
        </view>
        <b-switch @change="isRunFunc" size="40" v-model="info.is_run" color="#FF5A45"></b-switch>
      </view>
      
      <!-- 资产卡片 -->
      <view class="asset-card" @click="gotoWallet">
        <view class="asset-header">
          <text class="asset-title">总资产 (元)</text>
          <u-icon name="arrow-right" color="#999" size="28rpx"></u-icon>
        </view>
        <view class="asset-amount">{{ formatNumber(info.wallet || 0) }}</view>
      </view>
      
      <!-- 核心功能区 - 优化版 -->
      <view class="core-features">
        <view class="features-row">
          <view class="feature-card primary" @click="gotoOrders">
            <view class="feature-content">
              <view class="feature-icon-container">
                <view class="feature-icon order">
                  <u-icon name="list" color="#fff" size="44rpx"></u-icon>
                </view>
              </view>
              <view class="feature-info">
                <text class="feature-name">订单管理</text>
                <text class="feature-desc">查看全部订单</text>
              </view>
            </view>
            <view class="feature-badge" v-if="pendingCount > 0">{{ pendingCount }}</view>
          </view>
          
          <view class="feature-card" @click="menuJump(allMenuList[3])">
            <view class="feature-content">
              <view class="feature-icon-container">
                <view class="feature-icon verify">
                  <u-icon name="checkbox-mark" color="#fff" size="44rpx"></u-icon>
                </view>
              </view>
              <view class="feature-info">
                <text class="feature-name">酒券核销</text>
                <text class="feature-desc">扫码验证</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="features-row">
          <view class="feature-card" @click="menuJump(allMenuList[4])">
            <view class="feature-content">
              <view class="feature-icon-container">
                <view class="feature-icon allied">
                  <u-icon name="plus" color="#fff" size="44rpx"></u-icon>
                </view>
              </view>
              <view class="feature-info">
                <text class="feature-name">联营核销</text>
                <text class="feature-desc">联营商户验证</text>
              </view>
            </view>
          </view>
          
          <view class="feature-card" @click="menuJump(allMenuList[5])">
            <view class="feature-content">
              <view class="feature-icon-container">
                <view class="feature-icon collect">
                  <u-icon name="scan" color="#fff" size="44rpx"></u-icon>
                </view>
              </view>
              <view class="feature-info">
                <text class="feature-name">收款码</text>
                <text class="feature-desc">扫码收款</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 数据概览卡片 -->
      <view class="data-overview">
        <view class="overview-header">
          <text class="overview-title">业务概览</text>
          <view class="date-filter" @click="showDateFilter">
            <text class="date-label">{{ dateFilterText }}</text>
            <u-icon name="arrow-down-fill" color="#999" size="24rpx"></u-icon>
          </view>
        </view>
        
        <!-- 日期筛选弹出框 - 调整z-index -->
        <u-popup v-model="showDateFilterPopup" mode="bottom" border-radius="24" z-index="9000">
          <view class="date-filter-popup">
            <view class="filter-header">
              <text>{{ showCustomDatePicker ? '选择日期范围' : '选择日期' }}</text>
              <view class="close-btn" @click="closeDateFilter">
                <u-icon name="arrow-left" v-if="showCustomDatePicker" color="#999" size="32rpx"></u-icon>
                <u-icon name="close" v-else color="#999" size="32rpx"></u-icon>
              </view>
            </view>
            
            <view class="filter-options" v-if="!showCustomDatePicker">
              <view 
                v-for="(item, index) in dateFilterOptions" 
                :key="index"
                class="filter-option" 
                :class="{'active': dateFilterIndex === index}"
                @click="selectDateFilterOption(index)"
              >
                <text>{{ item.text }}</text>
                <u-icon v-if="dateFilterIndex === index" name="checkmark" color="#FF5A45" size="32rpx"></u-icon>
              </view>
            </view>
            
            <!-- 自定义日期选择器 - 修改确认按钮 -->
            <view class="custom-date-picker" v-if="showCustomDatePicker">
              <view class="inline-date-picker">
                <view class="date-section">
                  <text class="date-label">开始日期</text>
                  <view class="date-selector" @click="openDatePicker('start')">
                    <text>{{ customStartDate || '请选择' }}</text>
                    <u-icon name="calendar" color="#999" size="28rpx"></u-icon>
                  </view>
                </view>
                
                <view class="date-divider">至</view>
                
                <view class="date-section">
                  <text class="date-label">结束日期</text>
                  <view class="date-selector" @click="openDatePicker('end')">
                    <text>{{ customEndDate || '请选择' }}</text>
                    <u-icon name="calendar" color="#999" size="28rpx"></u-icon>
                  </view>
                </view>
              </view>
              
              <!-- 确认按钮 - 居中并添加背景色 -->
              <view class="confirm-button-container">
                <view 
                  class="custom-date-confirm" 
                  :class="{'disabled': !customStartDate || !customEndDate}"
                  @click="confirmCustomDateRange"
                >
                  确认
                </view>
              </view>
            </view>
          </view>
        </u-popup>
        
        <!-- 单独的日期选择器弹出层 -->
        <u-popup v-model="showNativeDatePicker" mode="bottom" z-index="9999">
          <view class="native-date-picker-container">
            <view class="picker-header">
              <view class="cancel-btn" @click="showNativeDatePicker = false">取消</view>
              <view class="confirm-btn" @click="confirmPickedDate">确定</view>
            </view>
            
            <picker-view 
              indicator-style="height: 80rpx;" 
              :value="datePickerValue" 
              @change="onDatePickerChange"
              class="native-date-picker"
            >
              <picker-view-column>
                <view class="picker-item" v-for="(year, index) in years" :key="'year-'+index">
                  {{year}}年
                </view>
              </picker-view-column>
              <picker-view-column>
                <view class="picker-item" v-for="(month, index) in months" :key="'month-'+index">
                  {{month}}月
                </view>
              </picker-view-column>
              <picker-view-column>
                <view class="picker-item" v-for="(day, index) in days" :key="'day-'+index">
                  {{day}}日
                </view>
              </picker-view-column>
            </picker-view>
          </view>
        </u-popup>
        
        <view class="overview-cards">
          <view class="data-card" @click="gotoOrders">
            <text class="data-value">{{ todayOrderCount || '0' }}</text>
            <text class="data-label">{{ dateFilterIndex === 0 ? '今日核销' : '核销量' }}</text>
            <view class="data-trend" v-if="orderTrend > 0">
              <u-icon name="arrow-upward" color="#4CAF50" size="24rpx"></u-icon>
              <text class="up">{{ orderTrend }}%</text>
            </view>
            <view class="data-trend" v-else-if="orderTrend < 0">
              <u-icon name="arrow-downward" color="#FF5A45" size="24rpx"></u-icon>
              <text class="down">{{ Math.abs(orderTrend) }}%</text>
            </view>
          </view>
          
          <view class="data-card" @click="gotoIncome">
            <text class="data-value">¥{{ todayIncome || '0' }}</text>
            <text class="data-label">收入额</text>
            <view class="data-trend" v-if="incomeTrend > 0">
              <u-icon name="arrow-upward" color="#4CAF50" size="24rpx"></u-icon>
              <text class="up">{{ incomeTrend }}%</text>
            </view>
            <view class="data-trend" v-else-if="incomeTrend < 0">
              <u-icon name="arrow-downward" color="#FF5A45" size="24rpx"></u-icon>
              <text class="down">{{ Math.abs(incomeTrend) }}%</text>
            </view>
          </view>
          
          <view class="data-card" >
            <text class="data-value">{{ pendingCount || '0' }}</text>
            <text class="data-label">累计核销</text>
            <view class="data-alert" v-if="pendingCount > 5">处理</view>
          </view>
        </view>
      </view>
      
      <!-- 商家工具箱 -->
      <view class="merchant-tools">
        <view class="tools-header">
          <text class="tools-title">商家工具</text>
        </view>
        
        <view class="tools-grid">
          <view class="tool-item" @click="menuJump(allMenuList[0])">
            <image class="tool-icon" src="/static/images/icon_user_buying.png"></image>
            <text class="tool-name">云购活动</text>
          </view>
          <view class="tool-item" @click="handleClickRecord">
            <image class="tool-icon" src="/static/images/record.png"></image>
            <text class="tool-name">云购记录</text>
          </view>
          <view class="tool-item" @click="menuJump(allMenuList[2])">
            <image class="tool-icon" src="/static/images/icon_user_goods.png"></image>
            <text class="tool-name">商品管理</text>
          </view>
          
          <view class="tool-item" @click="menuJump(allMenuList[6])">
            <image class="tool-icon" src="/static/images/icon_reservation.png"></image>
            <text class="tool-name">预约管理</text>
          </view>
          
          <view class="tool-item" @click="menuJump(allMenuList[7])">
            <image class="tool-icon" src="/static/images/icon_user_data.png"></image>
            <text class="tool-name">数据统计</text>
          </view>
          
          <view class="tool-item" @click="menuJump(menuList[4])">
            <image class="tool-icon" src="/static/images/icon_user_set.png"></image>
            <text class="tool-name">个人设置</text>
          </view>
        </view>
      </view>
      
      <!-- 退出登录和联系客服按钮区域 - 并排放置 -->
      <view class="action-buttons">
        <!-- 联系客服按钮 - 新颜色 -->
        <view class="contact-service-btn" @click="contactCustomerService">
          <text>联系客服</text>
        </view>
        
        <!-- 退出登录按钮 -->
        <view class="logout-btn" @click="handleLogout">
          <text>退出登录</text>
        </view>
      </view>
    </scroll-view>
    
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { apiLogout, businessOverviewData } from "@/api/user";
import { apiSetShopInfo } from "@/api/store";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
// import request from "@/utils/request"; // 导入请求工具

export default {
  mixins: [MescrollMixin],
  data() {
    return {
      info: {},
      refreshing: false,
      timeRange: 'today',
      todayOrderCount: 0,
      todayIncome: '0',
      pendingCount: 0,
      orderTrend: 0,
      incomeTrend: -5,
      orderChartData: {
        today: [60, 80, 40, 90, 60],
        week: [70, 50, 80, 60, 90],
        month: [60, 70, 80, 50, 95]
      },
      incomeChartData: {
        today: [70, 50, 80, 60, 90],
        week: [80, 60, 90, 50, 70],
        month: [50, 90, 70, 85, 65]
      },
      allMenuList: [
        {
          name: "云购活动",
          link: "/pages/panic_buying/panic_buying",
          image: "/static/images/icon_user_buying.png",
          badge: "0"
        },
        {
          name: "订单管理",
          link: "/pages/order_manage/order_manage",
          image: "/static/images/icon_user_order.png",
          badge: "5"
        },
        {
          name: "商品管理",
          // link: "/pages/goods/goods",
          link: "/pages/goods_manage/goods_manage",
          image: "/static/images/icon_user_goods.png"
        },
        {
          name: "酒券核销",
          link: "/pages/verification_order/verification_order",
          image: "/static/images/verification.png",
          badge: "2"
        },
        {
          name: "联营核销",
          link: "/pages/jointoperation_order/jointoperation_order", 
          image: "/static/images/allied_verification.png",
          badge: "3"
        },
        {
          name: "收款码",
          link: "/pages/payment_code/payment_code",
          image: "/static/images/code.png"
        },
        {
          name: "预约管理",
          link: "/pages/reservation/reservation",
          image: "/static/images/icon_reservation.png"
        },
        {
          name: "数据统计",
          link: "/bundle/pages/shop_data/shop_data",
          image: "/static/images/icon_user_data.png"
        },
        {
          name: "店铺设置",
          link: "/bundle/pages/shop_setting/shop_setting",
          image: "/static/images/icon_user_shop.png"
        },
        {
          name: "个人设置",
          link: "/bundle/pages/user_profile/user_profile",
          image: "/static/images/icon_user_set.png"
        }
      ],
      menuList: [
        {
          name: "酒券核销",
          link: "/pages/verification_order/verification_order",
          image: "/static/images/verification.png"
        },
        {
          name: "联营核销",
          link: "/pages/jointoperation_order/jointoperation_order",
          image: "/static/images/allied_verification.png"
        },
        {
          name: "收款码",
          link: "/pages/payment_code/payment_code",
          image: "/static/images/code.png"
        },
        {
          name: "店铺设置",
          link: "/bundle/pages/shop_setting/shop_setting",
          image: "/static/images/icon_user_shop.png"
        },
        {
          name: "个人设置",
          link: "/bundle/pages/user_profile/user_profile",
          image: "/static/images/icon_user_set.png"
        }
      ],
      showDateFilterPopup: false,
      showCustomDatePicker: false,
      dateFilterIndex: 0,
      dateFilterOptions: [
        { text: '今日', value: 'today' },
        { text: '昨日', value: 'yesterday' },
        { text: '近7日', value: 'week' },
        { text: '近30日', value: 'month' },
        { text: '自定义', value: 'custom' }
      ],
      customStartDate: '',
      customEndDate: '',
      customDateText: '自定义',
      tempDateFilterIndex: 0,
      showNativeDatePicker: false,
      currentPickingType: '',
      years: [],
      months: [],
      days: [],
      datePickerValue: [0, 0, 0],
      tempPickedDate: '',
      overviewLoading: false,
      businessData: {
        orderCount: 0,
        income: '0',
        pending: 0,
        orderTrend: 0,
        incomeTrend: 0
      }
    };
  },
  computed: {
    ...mapGetters(["isLogin"]),
    dateFilterText() {
      return this.dateFilterOptions[this.dateFilterIndex].text;
    }
  },
  methods: {
    ...mapActions(["getUser"]),
    async onRefresh() {
      this.refreshing = true;
      const dateType = this.dateFilterOptions[this.dateFilterIndex].value;
      
      let params = { type: dateType };
      
      // 如果是自定义日期，添加日期范围
      if (dateType === 'custom' && this.customStartDate && this.customEndDate) {
        params.start_date = this.customStartDate;
        params.end_date = this.customEndDate;
      }
      
      // 重新加载数据
      await this.loadBusinessOverview().finally(() => {
        this.refreshing = false;
      });
    },
    async downCallback() {
      let res = await this.getUser();
      this.info = JSON.parse(JSON.stringify(res));
      this.mescroll.endSuccess(0, false);
    },
    menuJump(item) {
      if (item.name === "预约管理" ) {
        uni.showToast({
          title: '功能开发中，敬请期待',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      if (item.name == "商品管理") {
        uni.reLaunch({
          url: item.link,
        });
      } else {
        this.$Router.push(item.link);
      }
    },
    async isRunFunc(event) {
      const res = await apiSetShopInfo({
        is_run: event.value ? 1 : 0,
      });
      this.$refs.uToast.show({
        title: "设置成功",
        type: "success",
      });
    },
    formatNumber(num) {
      return parseFloat(num).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    gotoWallet() {
      this.$Router.push('/bundle/pages/user_wallet/user_wallet');
    },
    gotoOrders() {
      this.$Router.push('/pages/jointoperation_order/jointoperation_order');
    },
    gotoIncome() {
      uni.showToast({
        title: '收入明细功能开发中',
        icon: 'none'
      });
    },
    gotoPending() {
      this.$Router.push('/pages/order_manage/order_manage?status=pending');
    },
    contactCustomerService() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none',
        duration: 2000
      });
    },
    showDateFilter() {
      this.tempDateFilterIndex = this.dateFilterIndex;
      this.showDateFilterPopup = true;
    },
    selectDateFilterOption(index) {
      if (this.dateFilterOptions[index].value === 'custom') {
        this.showCustomDatePicker = true;
        
        if (!this.customStartDate || !this.customEndDate) {
          const end = new Date();
          const start = new Date();
          start.setDate(start.getDate() - 7);
          
          this.customEndDate = this.formatDateString(end);
          this.customStartDate = this.formatDateString(start);
        }
      } else {
        this.dateFilterIndex = index;
        this.showDateFilterPopup = false;
        this.loadBusinessOverview();
      }
    },
    closeDateFilter() {
      if (this.showCustomDatePicker) {
        this.showCustomDatePicker = false;
      } else {
        this.showDateFilterPopup = false;
      }
    },
    initDatePickerData() {
      const currentYear = new Date().getFullYear();
      this.years = Array.from({length: 21}, (_, i) => currentYear - 10 + i);
      this.months = Array.from({length: 12}, (_, i) => i + 1);
      this.updateDays(currentYear, 1);
    },
    updateDays(year, month) {
      const daysInMonth = new Date(year, month, 0).getDate();
      this.days = Array.from({length: daysInMonth}, (_, i) => i + 1);
    },
    openDatePicker(type) {
      this.currentPickingType = type;
      
      let dateStr = '';
      if (type === 'start' && this.customStartDate) {
        dateStr = this.customStartDate;
      } else if (type === 'end' && this.customEndDate) {
        dateStr = this.customEndDate;
      } else {
        const currentDate = new Date();
        dateStr = this.formatDateString(currentDate);
      }
      
      if (dateStr) {
        const [year, month, day] = dateStr.split('-').map(Number);
        const yearIndex = this.years.indexOf(year);
        const monthIndex = this.months.indexOf(month);
        const dayIndex = this.days.indexOf(day);
        
        if (yearIndex >= 0 && monthIndex >= 0) {
          this.updateDays(year, month);
          this.datePickerValue = [yearIndex, monthIndex, dayIndex >= 0 ? dayIndex : 0];
        }
      }
      
      this.showNativeDatePicker = true;
    },
    onDatePickerChange(e) {
      const values = e.detail.value;
      const year = this.years[values[0]];
      const month = this.months[values[1]];
      
      if (this.datePickerValue[0] !== values[0] || this.datePickerValue[1] !== values[1]) {
        this.updateDays(year, month);
      }
      
      this.datePickerValue = values;
      const day = this.days[values[2]] || 1;
      this.tempPickedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    },
    confirmPickedDate() {
      if (this.currentPickingType === 'start') {
        this.customStartDate = this.tempPickedDate;
      } else if (this.currentPickingType === 'end') {
        this.customEndDate = this.tempPickedDate;
      }
      
      this.showNativeDatePicker = false;
    },
    formatDateString(date) {
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    confirmCustomDateRange() {
      if (!this.customStartDate || !this.customEndDate) {
        return;
      }
      
      const startDate = new Date(this.customStartDate);
      const endDate = new Date(this.customEndDate);
      
      if (startDate > endDate) {
        uni.showToast({
          title: '开始日期不能晚于结束日期',
          icon: 'none'
        });
        return;
      }
      
      const startShort = this.customStartDate.substring(5);
      const endShort = this.customEndDate.substring(5);
      this.customDateText = `${startShort}至${endShort}`;
      
      this.dateFilterIndex = 4;
      this.showCustomDatePicker = false;
      this.showDateFilterPopup = false;
      
      this.loadBusinessOverview();
    },
    // 加载业务概览数据
    async loadBusinessOverview() {
      this.overviewLoading = true;
      
      try {
        const params = {
          type: this.dateFilterOptions[this.dateFilterIndex].value
        };
        
        if (params.type === 'custom' && this.customStartDate && this.customEndDate) {
          params.start_date = this.customStartDate;
          params.end_date = this.customEndDate;
        }
        
        const response = await businessOverviewData(params);
		console.log(response)
        
        if (response) {
          const data = response;
          
          this.businessData = {
            orderCount: data.order_count || 0,
            income: this.formatAmount(data.income || 0),
            pending: data.pending_count || 0,
            orderTrend: data.order_trend || 0,
            incomeTrend: data.income_trend || 0
          };
          
          this.todayOrderCount = this.businessData.orderCount;
          this.todayIncome = this.businessData.income;
          this.pendingCount = this.businessData.pending;
          this.orderTrend = this.businessData.orderTrend;
          this.incomeTrend = this.businessData.incomeTrend;
        } else {
          uni.showToast({
            title: response?.msg || '数据加载失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载业务概览数据失败:', error);
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        });
      } finally {
        this.overviewLoading = false;
      }
    },
    // 格式化金额
    formatAmount(amount) {
      return parseFloat(amount).toFixed(2)
        .replace(/\d(?=(\d{3})+\.)/g, '$&,')
        .replace(/\.00$/, '');
    },
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '退出中...'
            });
            
            apiLogout().then(res => {
              uni.clearStorageSync();
              uni.reLaunch({
                url: '/pages/login/login'
              });
            }).catch(err => {
              uni.showToast({
                title: '退出失败，请重试',
                icon: 'none'
              });
            }).finally(() => {
              uni.hideLoading();
            });
          }
        }
      });
    },
    handleClickRecord() {
      this.$Router.push('/pages/panic_buying/panic_buying_list');
    },
  },
  created() {
    // 初始化日期选择器数据
    this.initDatePickerData();
    // 加载业务概览数据
    this.loadBusinessOverview();
  },
  onShow() {
    this.getUser().then((res) => {
      this.info = JSON.parse(JSON.stringify(res));
    });
    // 页面显示时重新加载数据
    this.loadBusinessOverview();
  }
};
</script>

<style lang="scss">
.merchant-center {
  position: relative;
  min-height: 100vh;
  background-color: #F8F8F8;
  overflow: hidden;
  color: #333;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  .status-bar-placeholder {
    height: var(--status-bar-height);
    width: 100%;
    background: linear-gradient(to right, #FF7676, #FF5A5A);
  }
  
  .header {
    height: 88rpx;
    width: 100%;
    background: linear-gradient(to right, #FF7676, #FF5A5A);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    .header-title {
      color: #fff;
      font-size: 36rpx;
      font-weight: 600;
    }
  }
  
  .content-container {
    height: calc(100vh - var(--status-bar-height) - 88rpx);
    padding: 0 24rpx;
    box-sizing: border-box;
  }
  
  // 身份卡片
  .identity-card {
    margin: 30rpx 0 0;
    border-radius: 24rpx;
    overflow: hidden;
    background: linear-gradient(135deg, #FF7676, #FF4433);
    box-shadow: 0 8rpx 20rpx rgba(255, 86, 86, 0.2);
    transform: translateZ(0);
    
    .card-content {
      padding: 32rpx;
      display: flex;
      align-items: center;
      position: relative;
    }
    
    .merchant-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 20rpx;
      border: 3rpx solid rgba(255, 255, 255, 0.4);
      background-color: rgba(255, 255, 255, 0.1);
      object-fit: cover;
    }
    
    .merchant-info {
      flex: 1;
      margin-left: 20rpx;
      
      .name-container {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;
      }
      
      .merchant-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #fff;
        margin-right: 12rpx;
      }
      
      .verified-badge {
        font-size: 20rpx;
        padding: 2rpx 12rpx;
        background-color: rgba(255, 255, 255, 0.2);
        color: #fff;
        border-radius: 12rpx;
      }
      
      .merchant-id {
        font-size: 22rpx;
        color: rgba(255, 255, 255, 0.7);
      }
    }
    
    .action-button {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &.settings {
        background-color: rgba(255, 255, 255, 0.2);
        transition: background-color 0.2s;
        
        &:active {
          background-color: rgba(255, 255, 255, 0.3);
        }
      }
    }
  }
  
  // 经营状态卡片
  .status-card {
    margin: 20rpx 0;
    padding: 24rpx 32rpx;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .status-label {
      display: flex;
      align-items: center;
      
      .status-indicator {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: #ccc;
        margin-right: 12rpx;
        position: relative;
        
        &.active {
          background-color: #4CAF50;
          
          &:after {
            content: '';
            position: absolute;
            top: -4rpx;
            left: -4rpx;
            right: -4rpx;
            bottom: -4rpx;
            border-radius: 50%;
            background-color: rgba(76, 175, 80, 0.2);
            animation: pulse 2s infinite;
          }
        }
      }
      
      text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
  
  // 资产卡片
  .asset-card {
    padding: 28rpx 32rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 28rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .asset-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;
    }
    
    .asset-title {
      font-size: 26rpx;
      color: #999;
    }
    
    .asset-amount {
      font-size: 44rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  // 核心功能区 - 优化版
  .core-features {
    margin-bottom: 32rpx;
    
    .features-row {
      display: flex;
      margin-bottom: 24rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .feature-card {
      flex: 1;
      height: 160rpx;
      background-color: #fff;
      border-radius: 20rpx;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
      padding: 24rpx;
      margin-right: 24rpx;
      position: relative;
      overflow: hidden;
      
      &:last-child {
        margin-right: 0;
      }
      
      &:active {
        transform: scale(0.98);
        transition: transform 0.15s ease;
      }
      
      &.primary {
        background: linear-gradient(135deg, #fff, #FFEFEF);
        
        &::after {
          content: '';
          position: absolute;
          right: -20rpx;
          bottom: -20rpx;
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          background: rgba(255, 90, 69, 0.08);
          z-index: 0;
        }
      }
      
      .feature-content {
        display: flex;
        position: relative;
        z-index: 1;
        height: 100%;
      }
      
      .feature-icon-container {
        margin-right: 20rpx;
        display: flex;
        align-items: center;
        
        .feature-icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
          
          &.order {
            background: linear-gradient(135deg, #FF7676, #FF4433);
          }
          
          &.verify {
            background: linear-gradient(135deg, #5E81F4, #3C64F4);
          }
          
          &.allied {
            background: linear-gradient(135deg, #6A9E70, #4C8652);
          }
          
          &.collect {
            background: linear-gradient(135deg, #F5A623, #F27D0C);
          }
        }
      }
      
      .feature-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        .feature-name {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .feature-desc {
          font-size: 22rpx;
          color: #999;
        }
      }
      
      .feature-badge {
        position: absolute;
        top: 24rpx;
        right: 24rpx;
        min-width: 36rpx;
        height: 36rpx;
        border-radius: 18rpx;
        background-color: #FF5A45;
        color: #fff;
        font-size: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10rpx;
        font-weight: 600;
        box-shadow: 0 2rpx 8rpx rgba(255, 90, 69, 0.3);
        z-index: 2;
      }
    }
  }
  
  // 数据概览
  .data-overview {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 28rpx 32rpx;
    margin-bottom: 28rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .overview-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
      
      .overview-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
      
      .date-filter {
        display: flex;
        align-items: center;
        padding: 8rpx 16rpx;
        background-color: #F7F7F9;
        border-radius: 28rpx;
        
        .date-label {
          font-size: 24rpx;
          color: #666;
          margin-right: 8rpx;
        }
        
        &:active {
          background-color: #EEEEF2;
        }
      }
    }
    
    // 日期筛选弹出框样式
    .date-filter-popup {
      padding: 30rpx 30rpx 50rpx;
      
      .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        margin-bottom: 20rpx;
        border-bottom: 1px solid #EEEEF2;
        
        text {
          font-size: 30rpx;
          font-weight: 600;
          color: #333;
        }
        
        .close-btn {
          padding: 10rpx;
        }
      }
      
      .filter-options {
        .filter-option {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 28rpx 20rpx;
          border-bottom: 1px solid #EEEEF2;
          border-radius: 12rpx;
          margin-bottom: 6rpx;
          
          text {
            font-size: 28rpx;
            color: #333;
          }
          
          &.active {
            background-color: rgba(255, 90, 69, 0.05);
            
            text {
              color: #FF5A45;
              font-weight: 500;
            }
          }
          
          &:active {
            background-color: rgba(0, 0, 0, 0.03);
          }
        }
      }
      
      // 内联日期选择样式
      .inline-date-picker {
        display: flex;
        align-items: center;
        margin: 20rpx 0 40rpx;
        
        .date-section {
          flex: 1;
          
          .date-label {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 12rpx;
            display: block;
          }
          
          .date-selector {
            height: 80rpx;
            background-color: #F7F7F9;
            border-radius: 12rpx;
            padding: 0 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            text {
              font-size: 28rpx;
              color: #333;
            }
            
            &:active {
              background-color: #EEEEF2;
            }
          }
        }
        
        .date-divider {
          margin: 0 20rpx;
          font-size: 26rpx;
          color: #999;
          padding-top: 30rpx;
        }
      }
    }
    
    .overview-cards {
      display: flex;
      justify-content: space-between;
      
      .data-card {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 16rpx;
        border-radius: 12rpx;
        background-color: #F8F8F8;
        margin: 0 8rpx;
        
        &:first-child {
          margin-left: 0;
        }
        
        &:last-child {
          margin-right: 0;
        }
        
        .data-value {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 6rpx;
        }
        
        .data-label {
          font-size: 22rpx;
          color: #999;
        }
        
        .data-trend {
          position: absolute;
          top: 16rpx;
          right: 16rpx;
          display: flex;
          align-items: center;
          
          text {
            font-size: 20rpx;
            margin-left: 2rpx;
            
            &.up {
              color: #4CAF50;
            }
            
            &.down {
              color: #FF5A45;
            }
          }
        }
        
        .data-alert {
          position: absolute;
          top: 16rpx;
          right: 16rpx;
          font-size: 20rpx;
          color: #fff;
          background-color: #FF5A45;
          padding: 2rpx 12rpx;
          border-radius: 12rpx;
        }
      }
    }
  }
  
  // 商家工具箱
  .merchant-tools {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 28rpx 32rpx;
    margin-bottom: 32rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .tools-header {
      margin-bottom: 24rpx;
      
      .tools-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .tools-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24rpx;
      
      .tool-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .tool-icon {
          width: 64rpx;
          height: 64rpx;
          margin-bottom: 8rpx;
          opacity: 0.85;
        }
        
        .tool-name {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
  
  // 退出登录和联系客服按钮区域 - 并排放置
  .action-buttons {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    
    .logout-btn, .contact-service-btn {
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 45rpx;
      font-size: 30rpx;
      font-weight: 500;
      width: 48%; // 设置宽度使两个按钮并排放置
      box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
    }
    
    .logout-btn {
      background: linear-gradient(135deg, #FF7676, #FF4433);
      color: #fff;
      box-shadow: 0 6rpx 16rpx rgba(255, 86, 86, 0.2);
      
      &:active {
        opacity: 0.9;
      }
    }
    
    .contact-service-btn {
      background: linear-gradient(135deg, #4C84FF, #3A6FE3);
      color: #fff;
      box-shadow: 0 6rpx 16rpx rgba(76, 132, 255, 0.2);
      
      &:active {
        opacity: 0.9;
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

// 原生日期选择器样式
.native-date-picker-container {
  background-color: #fff;
  
  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #EEEEF2;
    
    .cancel-btn, .confirm-btn {
      font-size: 28rpx;
      padding: 10rpx;
    }
    
    .cancel-btn {
      color: #999;
    }
    
    .confirm-btn {
      color: #FF5A45;
      font-weight: 500;
    }
  }
  
  .native-date-picker {
    width: 100%;
    height: 480rpx;
    
    .picker-item {
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 28rpx;
    }
  }
}

// 确认按钮容器 - 新增
.confirm-button-container {
  display: flex;
  justify-content: center;
  margin: 40rpx 0 20rpx;
}

// 确认按钮样式 - 修改
.custom-date-confirm {
  height: 90rpx;
  width: 70%;
  background: linear-gradient(135deg, #FF7676, #FF4433);
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 45rpx;
  box-shadow: 0 6rpx 16rpx rgba(255, 86, 86, 0.2);
  
  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  &.disabled {
    background: linear-gradient(135deg, #CCCCCC, #AAAAAA);
    opacity: 0.8;
    box-shadow: none;
  }
}
</style>
